/*
 * @Author: zhangyujie
 * @Date:   2015-08-12 10:42:41
 * @Last Modified by:   zhangyujie
 * @Last Modified time: 2015-08-14 09:55:06
 */

'use strict';

(function() {

    var Y = window.Y || {}


    var util = {

        getNumByRate: function(w, rate) {

            if (typeof rate === 'string' && rate.indexOf('%')) {

                return w * Number(rate.replace('%', '')) / 100
            } else if (typeof rate === 'string' && rate.indexOf('px')) {

                return Number(rate.replace('px', ''))
            } else {

                return Number(rafte)
            }
        },
        getTextSize: function(text, style) {

            var span, position, width, height

            span = document.createElement('span')

            span.innerText = text

            for (var key in style) {

                span.style[key] = style[key]
            }

            document.body.appendChild(span)

            position = span.getBoundingClientRect()

            width = position.width

            height = position.height

            document.body.removeChild(span)

            return {

                width: width,
                height: height
            }
        }
    }

    Y.two_2 = function(setting) {


        var width, height, selector, radius, colorset, center, innerR,
            outerR, series, centerX, centerY, startA, endA,
            dom, position, arc, pie, translate, endAngle,
            name, value, circles, i, cr, serie, data,
            rotate, radial, rScale,
            min, max, text

        var svg, content, left, right, ticks

        var leftStartA = -Math.PI,
            rightStartA = 0,
            leftEndA = 0,
            rightEndA = 2 * Math.PI

        selector = setting.selector
        dom = document.querySelector(selector)
        position = dom.getBoundingClientRect()
        width = position.width
        height = position.height
        radius = setting.radius
        center = setting.center
        colorset = setting.colorset
        outerR = util.getNumByRate(width, radius[0])
        innerR = util.getNumByRate(width, radius[1])
        centerX = util.getNumByRate(width, center[0])
        centerY = util.getNumByRate(height, center[1])
        translate = centerX + ',' + centerY
        startA = 0
        endA = 2 * Math.PI
        series = setting.series
        serie = series[0]
        data = serie.data

        min = d3.min(data, function(d, i) {

            return d['value']
        })
        max = d3.max(data, function(d, i) {

            return d['value']
        })

        circles = []

        radial = d3.svg.line.radial()
            .radius(function(d) {

                return rScale(d.value)

            }).angle(function(d, i) {

                rotate = i * 2 * Math.PI / (data.length)

                return rotate
            })
        rScale = d3.scale.linear()
            .domain([min, max])
            .range([innerR, outerR])
        svg = d3.select(selector)
            .append('svg')
            .attr('width', width)
            .attr('height', height)


        content = svg.append('g')
            .attr('transform', 'translate(' + translate + ')')



        for (i = 0; i < 4; i++) {

            cr = outerR - (i * (outerR - innerR) / 3)
            circles.push({
                color: serie.circleStyle.colorset[i],
                r: cr
            })



        }


        //中间的4个月
        content.append('g').selectAll('.bigCircle')
            .data(circles)
            .enter()
            .append('circle')
            .attr('r', function(d, i) {

                return d.r
            })
            .attr('fill', function(d, i) {

                return d.color
            })


        //刻度直线
        content.append('g')
            .selectAll('.nameLine')
            .data(data)
            .enter()
            .append('line')
            .attr('x1', 0)
            .attr('y1', 0)
            .attr('x2', 0)
            .attr('y2', -outerR * 1.05)
            .style(serie.tickLineStyle)
            .attr('transform', function(d, i) {

                rotate = i * 360 / (data.length)

                return 'rotate(' + rotate + ', 0, 0)'
            })
            //刻度文本
        content.append('g')
            .selectAll('.nameText')
            .data(data)
            .enter()
            .append('text')
            .text(function(d, i) {

                return d.name
            })
            .style(serie.nameStyle)
            .attr('y', function(d, i) {

                return -outerR * 1.07
            })
            .attr('transform', function(d, i) {

                rotate = i * 360 / (data.length)

                return 'rotate(' + rotate + ', 0, 0)'
            })

        //数值线
        content.append('g')
            .append('path')
            .attr('d', radial(data))
            .style(serie.valueStyle)

        //数值顶点
        content.append('g')
            .selectAll('.vertex')
            .data(data)
            .enter()
            .append('circle')
            .attr('r', '5')
            .style(serie.vertexStyle)
            .attr('class', 'vertex')
            .attr('cy', function(d, i) {

                return -rScale(d.value)
            })
            .attr('transform', function(d, i) {

                rotate = i * 360 / (data.length)

                return 'rotate(' + rotate + ', 0, 0)'
            })
            .on('touchstart', function(d, i) {

                setting.nodeMouseover && setting.nodeMouseover(d, i, d3.select(this))
            })
            .on('touchend', function(d, i) {

                setting.nodeMouseout && setting.nodeMouseout(d, i, d3.select(this))
            })
            .on('mouseover', function(d, i) {

                setting.nodeMouseover && setting.nodeMouseover(d, i, d3.select(this))
            })
            .on('mouseout', function(d, i) {

                setting.nodeMouseout && setting.nodeMouseout(d, i, d3.select(this))
            })


        //数值刻度
        ticks = content.append('g')

        for (i = 0; i < 4; i++) {

            text = (max - (i * (max - min) / 3))

            cr = outerR - (i * (outerR - innerR) / 3)


            ticks.append('text')
                .attr('x', 0)
                .attr('y', -cr)
                .style(serie.tickStyle)
                .text(text.toFixed(0))
                .attr('dy', '1.1em')


        }
      content.append("image")
            .attr("x", -50)
            .attr("y", -50)
            .attr("width", 100)
            .attr("height", 100)
            .attr("xlink:href", "/resources/app/images/chart/chart_head.png");

    }


    window.Y = Y
}())
